<!DOCTYPE html>
<html>

<script id="vertex-shader" type="x-shader/x-vertex">

attribute  vec4 vPosition;
attribute  vec4 vColor;
varying vec4 fColor;

uniform vec3 theta;

vec3 angles = radians( theta );

// quaternion multiplier

vec4 multq(vec4 a, vec4 b)
{
   return(vec4(a.x*b.x - dot(a.yzw, b.yzw), a.x*b.yzw+b.x*a.yzw+cross(b.yzw, a.yzw)));
}

// inverse quaternion

vec4 invq(vec4 a)
{
   return(vec4(a.x, -a.yzw)/dot(a,a));
}


void main()
{
  vec4 r;
  vec4 p;
  vec4 rx, ry, rz;
  vec3 c =  cos(angles/2.0);
  vec3 s =  sin(angles/2.0);
  rx = vec4(c.x, -s.x, 0.0, 0.0); // x rotation quaternion
  ry = vec4(c.y, 0.0, s.y, 0.0); // y rotation quaternion
  rz = vec4(c.z, 0.0, 0.0, s.z); // z rotation quaternion
  r = multq(rx, multq(ry, rz)); // rotation quaternion
  p = vec4(0.0, vPosition.xyz);  // input point quaternion
  p = multq(r, multq(p, invq(r))); // rotated point quaternion
  gl_Position = vec4( p.yzw, 1.0); // convert back to homogeneous coordinates
  gl_Position.z = -gl_Position.z;
  fColor = vColor;
}
</script>

<script id="fragment-shader" type="x-shader/x-fragment">

precision mediump float;

varying vec4 fColor;

void
main()
{
    gl_FragColor = fColor;
}
</script>

<script type="text/javascript" src="../Common/webgl-utils.js"></script>
<script type="text/javascript" src="../Common/initShaders.js"></script>
<script type="text/javascript" src="../Common/MV.js"></script>
<script type="text/javascript" src="cubeq.js"></script>

<body>
<canvas id="gl-canvas" width="512"" height="512">
Oops ... your browser doesn't support the HTML5 canvas element
</canvas>

<br/>

<button id= "xButton">Rotate X</button>
<button id= "yButton">Rotate Y</button>
<button id= "zButton">Rotate Z</button>

</body>
</html>
